<template>
  <el-tabs class="tabs" v-model="activeName" type="card" @tab-click="handleClick" @tab-remove="handleRemove">
    <el-tab-pane
      v-for="(tab) in tabsArray"
      :key="tab.name"
      :name="tab.name"
      :closable="closeable">
      <div slot="label" style="display: inline-block;" @contextmenu.prevent="onContextmenu($event, tab.name)">{{tab.meta.label}}</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "Tabs",
  computed:{
    closeable(){
      return this.tabsArray.length >1
    }
  },
  inject: ['addCache', 'delCache'],
  data(){
    return{
      tabsArray:[],
      activeName: ''
    }
  },
  created(){
    //注册关闭事件
    this.$bus.$on('closeTab', (function(name = this.activeName){
      this.handleRemove(name);
    }).bind(this)).$on('closeRight', (function(name = this.activeName){
      while(this.tabsArray[this.tabsArray.length - 1].name !== name){
        this.handleRemove(this.tabsArray[this.tabsArray.length - 1].name);
      }
    }).bind(this)).$on('closeOthers', (function(name = this.activeName){
      this.tabsArray.filter(tab => tab.name !== name).map(tab => {
        this.handleRemove(tab.name);
      });
    }).bind(this));
  },
  methods:{
    handleClick(val){
      let tab = this.tabsArray[+(val.index)];
      if(this.$route.name !== tab.name){
        this.$router.push(tab);
      }
    },
    handleRemove(name){
      let index = this.tabsArray.findIndex(tab => tab.name === name), tab = {...this.tabsArray[index]};
      if(name === this.activeName){
        let newActive;
        if(index === this.tabsArray.length - 1){
          newActive = this.tabsArray[index - 1];
        }else{
          newActive = this.tabsArray[index + 1];
        }
        this.$router.replace(newActive);
      }
      this.$delete(this.tabsArray, index);
      this.delCache(tab);
    },
    onContextmenu(event, name){
      const items = [];
      if(name === this.activeName){
        items.push({
          label: "重新加载",
          onClick: () => {
            this.$bus.$emit('reload', name)
          }
        });
      }
      if(this.closeable){
        items.push({
          label: "关闭" ,
          onClick: () => {
            this.$bus.$emit('closeTab', name)
          }
        });
      }
      if(this.tabsArray.length && this.tabsArray[this.tabsArray.length - 1].name !== name){
        items.push({
          label: "关闭右侧" ,
          onClick: () => {
            this.$bus.$emit('closeRight', name)
          }
        });
      }
      if(this.closeable){
        items.push({
          label: "关闭其它" ,
          onClick: () => {
            this.$bus.$emit('closeOthers', name)
          }
        });
      }
      this.$contextmenu({
        items,
        event,
        customClass: 'content-menu'
      });
    }
  },
  watch:{
    '$route':{
      handler(val){
        if(val.name === 'Home') return;
        let tab = this.tabsArray.find(item => item.name === val.name);
        if(!tab){
          tab = val;
          this.tabsArray.push(val);
        }
        this.addCache(tab);
        this.$nextTick(() => {
          this.activeName = tab.name;
        })
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.tabs{
  height: 50px;
  background: #fff;
  padding: 0 20px;
  margin-top: -1px;
  border-bottom: 1px solid #E4E7ED;
  /deep/ .el-tabs__header{
    margin: 0;
    height: 50px;
    border: none;
    .el-tabs__nav-wrap{
      height: 50px;
      .el-tabs__nav{
        border-radius: 0;
        border: none;
        .el-tabs__item{
          border: none;
          width: 140px;
          height: 50px;
          line-height: 50px;
          box-shadow: none!important;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          padding: 0 10px;
          &.is-active:after{
            content: '';
            display: block;
            position: absolute;
            border: 2px solid @common-color;
            bottom: 0;
            left: 20px;
            width: calc(100% - 44px);
          }
        }
      }
    }
  }
}
</style>